<template>
  <div class="ptContenBox">
    <PetListItem
      v-for="item in newRecommendList"
      :key="item.pet_id"
      :petList="item"
      @click="handlePetDetails(item.pet_id)"
    />
  </div>
</template>

<script>
import PetListItem from "@/views/petTable/component/PetListItem";
import { useRouter } from "vue-router";
import { ref, watchEffect } from "vue";
import { getRecommend } from "@/api/home";
import { useStore } from "vuex";
export default {
  name: "PetContentList",
  components: { PetListItem },
  setup() {
    const { newRecommendList, getRecommendList } = handleGetRecommend();
    getRecommendList();
    const router = useRouter();
    const handlePetDetails = (value) => {
      router.push(`/petTable/${value}`);
    };
    return {
      handlePetDetails,
      newRecommendList,
    };
  },
};
//获取宠物列表数据
function handleGetRecommend() {
  const store = useStore();
  const recommendList = ref([]);
  const newRecommendList = ref([]);
  const getRecommendList = () => {
    getRecommend("all").then((res) => {
      console.log(res);
      newRecommendList.value = recommendList.value = res.data;
    });
  };
  //监听品种并筛选
  watchEffect(() => {
    if (
      store.state.petFiltrate.categoryId == 0 &&
      store.state.area.city == "全部"
    ) {
      //种类为：categoryId(0)全部  城市地址为：city(全部)
      newRecommendList.value = recommendList.value;
    } else if (
      store.state.petFiltrate.categoryId != 0 &&
      store.state.area.city == "全部"
    ) {
      //种类为：categoryId(*)  城市地址为：city(全部)
      newRecommendList.value = recommendList.value.filter(
        (item) => item.category_id == store.state.petFiltrate.categoryId
      );
    } else if (
      store.state.petFiltrate.categoryId == 0 &&
      store.state.area.city != "全部"
    ) {
      //种类为：categoryId(0)全部  城市地址为：city(*)
      newRecommendList.value = recommendList.value.filter((item) =>
        item.pet_giveaddress.includes(store.state.area.city)
      );
    } else {
      //种类为：categoryId(*)  城市地址为：city(*)
      newRecommendList.value = recommendList.value.filter(
        (item) =>
          item.category_id == store.state.petFiltrate.categoryId &&
          item.pet_giveaddress.includes(store.state.area.city)
      );
    }
  });

  return { getRecommendList, newRecommendList };
}
</script>

<style scoped lang="less">
.ptContenBox {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  padding: 0.3rem 0.3rem;
  background-color: #f4f2f2;
}
</style>
